<!--
 * @Author: 李兵 964368540@qq.com
 * @Date: 2024-05-25 10:11:07
 * @LastEditors: xuezhuangzhuang xzz6996@qq.com
 * @LastEditTime: 2025-01-03 18:10:00
 * @FilePath: \crm\pages\form\customer-form.vue
 * @Description: 新增客户  form
-->
<template>
  <view class="form-wrap">
    <uni-forms
      ref="baseForm"
      :modelValue="formData"
      :rules="rules"
      label-position="left"
      label-width="90px"
    >
      <view class="forms-item-wrap">
        <uni-forms-item label="客户名称" name="name" :required="true">
          <input
            type="text"
            trim="all"
            v-model="formData.name"
            placeholder="请输入客户名称"
            placeholder-class="placeholder_class"
          />
        </uni-forms-item>
        <uni-forms-item label="客户电话" name="phone" :required="true">
          <input
            type="number"
            :maxlength="11"
            trim="all"
            v-model="formData.phone"
            placeholder="请输入客户电话"
            placeholder-class="placeholder_class"
          />
        </uni-forms-item>
        <uni-forms-item label="所在地区" name="area" :required="true">
          <ChinaArea @input="inputHandle" ref="chinaAreaRefs" />
        </uni-forms-item>
        <uni-forms-item label="详细地址" name="address">
          <input
            type="text"
            trim="all"
            v-model="formData.address"
            placeholder="请输入详细地址"
            placeholder-class="placeholder_class"
          />
        </uni-forms-item>
        <uni-forms-item label="客户类型" name="customTypeId" :required="true">
          <SelectPicker :range="customTypeList" v-model="formData.customTypeId">
            <view
              :class="[
                formData.customTypeId ? 'uni-input-input' : 'select-wrap',
              ]"
              >{{
                formData.customTypeId
                  ? getName(customTypeList, formData.customTypeId)
                  : "请选择客户类型"
              }}</view
            >
          </SelectPicker>
        </uni-forms-item>
        <uni-forms-item label="客户等级" name="customLevelId">
          <SelectPicker
            :range="customLevelList"
            v-model="formData.customLevelId"
          >
            <view
              :class="[
                formData.customLevelId ? 'uni-input-input' : 'select-wrap',
              ]"
              >{{
                formData.customLevelId
                  ? getName(customLevelList, formData.customLevelId)
                  : "请选择客户等级"
              }}</view
            >
          </SelectPicker>
        </uni-forms-item>
      </view>
      <view class="forms-item-wrap">
        <uni-forms-item label="客户来源" name="customSource">
          <SelectPicker
            :range="CUSTOMER_SOURCE_ARRAY"
            v-model="formData.customSource"
          >
            <view
              :class="[
                formData.customSource ? 'uni-input-input' : 'select-wrap',
              ]"
              >{{
                formData.customSource
                  ? CUSTOMER_SOURCE_MAP[formData.customSource]
                  : "请选择客户来源"
              }}</view
            >
          </SelectPicker>
        </uni-forms-item>
        <uni-forms-item label="状态" name="status">
          <SelectPicker
            :range="CUSTOMER_STATUS_ARRAY"
            v-model="formData.status"
          >
            <view
              :class="[
                formData.status !== null ? 'uni-input-input' : 'select-wrap',
              ]"
              >{{
                formData.status !== null
                  ? CUSTOMER_STATUS_MAP[formData.status]
                  : "请选择客户状态"
              }}</view
            >
          </SelectPicker>
        </uni-forms-item>
      </view>
      <view class="forms-item-wrap">
        <uni-forms-item label="客户备注" name="remark">
          <textarea
            type="textarea"
            trim="all"
            v-model="formData.remark"
            placeholder="请输入客户备注"
            placeholder-class="placeholder_class"
          />
        </uni-forms-item>
      </view>
    </uni-forms>
    <!-- <button type="primary" @click="onSumbit" :loading="loading" :disabled="loading">
            确定
        </button> -->
    <bottombox>
      <u-button
        type="error"
        text="保存"
        @click="onSumbit"
        :loading="loading"
        :disabled="loading"
      ></u-button>
    </bottombox>
  </view>
</template>
<script>
import {
  addCompany,
  updateCompany,
  getCompanyInfo,
} from "@/apis/customer/index";
import SelectPicker from "@/components/select-picker/select-picker";
import { getCustomerType, getCustomerLevel } from "@/config/storage";
import ChinaArea from "@/pagesform/china-area/china-area";

import {
  CUSTOMER_SOURCE_ARRAY,
  CUSTOMER_SOURCE_MAP,
  CUSTOMER_STATUS_ARRAY,
  CUSTOMER_STATUS_MAP,
} from "@/contacts/calendar";
export default {
  name: "customer-form",
  onLoad(data) {
    this.customId = data.id;
  },
  components: {
    SelectPicker,
    ChinaArea,
  },
  data() {
    return {
      placeholderStyle: { color: "red", fontSize: "14px" },
      CUSTOMER_SOURCE_ARRAY,
      CUSTOMER_SOURCE_MAP,
      CUSTOMER_STATUS_ARRAY,
      CUSTOMER_STATUS_MAP,
      customTypeList: [], // 客户类型
      customLevelList: [], // 客户等级
      customId: "",
      loading: false,
      formData: {
        name: null, // 客户名称
        phone: null, // 客户电话
        area: null, // 所在地区
        address: null, // 详细地址
        customTypeId: "", // 客户类型
        customLevelId: "", // 客户等级
        customSource: "", // 客户来源
        status: "0", // 状态
        remark: null, // 客户备注
      },
      rules: {
        name: {
          rules: [
            {
              required: true,
              errorMessage: "请输入客户名称",
            },
          ],
        },
        phone: {
          rules: [
            {
              required: true,
              errorMessage: "请输入客户手机号",
            },
            {
              minLength: 11,
              maxLength: 11,
              errorMessage: "请输入正确的客户手机号"
            },
          ],
        },
        area: {
          rules: [
            {
              required: true,
              errorMessage: "请选择所在地区",
            },
          ],
        },
        customTypeId: {
          rules: [
            {
              required: true,
              errorMessage: "请选择客户类型",
            },
          ],
        },
      },
    };
  },
  onShow() {
    this.fillCustom();
    this._getCustomerInfo();
  },
  onReady() {
    uni.setNavigationBarTitle({
      title: "编辑客户",
    });
  },
  methods: {
    // 填充客户类型 客户等级
    fillCustom() {
      let customTypeList = getCustomerType() || [];
      let customLevelList = getCustomerLevel();
      this.customTypeList = customTypeList.map((item) => {
        return {
          label: item.name,
          value: item.id,
        };
      });
      this.customLevelList = customLevelList.map((item) => {
        return {
          label: item.levelName,
          value: item.id,
        };
      });
    },
    // 填充客户类型 客户等级 name
    getName(data, value) {
      const chooseData = data.filter((item) => {
        console.log(item.value, value);
        if (item.value == value) {
          return item;
        }
      });
      return chooseData[0].label;
    },
    inputHandle(val, name) {
      this.formData.area = val;
      this.formData.provinceCode = val ? val[0] : null;
      this.formData.cityCode = val ? val[1] : null;
      this.formData.regionCode = val ? val[2] : null;
      this.formData.province = name ? name[0] : null;
      this.formData.city = name ? name[1] : null;
      this.formData.region = name ? name[2] : null;
    },
    // 获取用户详情
    async _getCustomerInfo() {
      if (!this.customId) {
        return;
      }
      const res = await getCompanyInfo(this.customId);
      console.log(res);
      Object.keys(this.formData).forEach((key) => {
        this.formData[key] = res[key];
      });
      this.inputHandle(
        [res.provinceCode, res.cityCode, res.regionCode],
        [res.province, res.city, res.region]
      );
      this.$nextTick(() => {
        this.$refs.chinaAreaRefs.regionStr =
          res.province + " " + res.city + " " + res.region;
      });
    },
    async onSumbit() {
      const valid = await this.$refs.baseForm.validate();
      if (valid) {
        if (this.formData.phone && this.formData.phone.length !== 11) {
          uni.showToast({
            icon: "none",
            title: "手机号格式不对",
            duration: 2000,
          });
          return;
        }
        try {
          this.loading = true;
          const body = {
            highSeas: 0,
            ...this.formData,
            id: this.customId || 0,
          };
          let api = this.customId ? updateCompany : addCompany;
          await api(body);
          this.loading = false;
          uni.showToast({
            icon: "none",
            title: "操作成功",
            duration: 2000,
          });
          setTimeout(() => {
            uni.navigateBack();
          }, 2000);
        } catch (error) {
          this.loading = false;
        }
      }
    },
  },
};
</script>
<style lang="scss" scoped>
page {
  background: #f2f4f5;
}
</style>
